<template>
  <div class="total-box">
    <!-- 搜索 -->
    <div class="section1">
      <div class="section1-1"  @click="addAdvertise()">
        <div>添加广告</div>
      </div>
    </div>
    <!-- 表格数据 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="advertising_id" label="广告id"></el-table-column>
        <el-table-column prop="advertising_path" label="广告图片">
          <template slot-scope="scope">
            <img :src="scope.row.advertising_path" class="adver-img" />
          </template>
        </el-table-column>
        <el-table-column
          prop="advertising_jump_path"
          label="跳转路径"
        ></el-table-column>
        <el-table-column prop="advertising_sort" label="排序"></el-table-column>
        <el-table-column prop="advertising_state" label="状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.advertising_state == 1 ? '启用' : '禁用'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="advertising_traffic"
          label="阅读量"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="modify(scope.row, 0)"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item @click.native="modify(scope.row, 1)"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 点击编辑出现的模态框 -->
    <el-dialog title="编辑广告" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="form">
        <!-- 头像 -->
        <div class="touxiangdiv">
          <div class="touxiang">
            <el-upload
              class="avatar-uploader"
              action="http://192.168.43.75/WashMachine/tuxiangdizhi"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-camera-solid"></i>
            </el-upload>
          </div>
        </div>
        <el-form-item
          label="广告编号"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            :value="form.advertising_id"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="跳转路径"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            v-model="form.advertising_jump_path"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-select v-model="form.advertising_state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            :value="form.advertising_state"
            autocomplete="off"
          ></el-input> -->
        </el-form-item>
        <el-form-item
          label="阅读量"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            v-model="form.advertising_traffic"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="queding">确定</el-button>
      </div>
    </el-dialog>

    <!-- 点击添加出现的模态框 -->
    <el-dialog
      title="添加广告"
      :visible.sync="adddialogFormVisible"
      width="600px"
    >
      <el-form :model="form">
        <!-- 头像 -->
        <div class="touxiangdiv">
          <div class="touxiang">
            <el-upload
              class="avatar-uploader"
              action="http://192.168.43.75/WashMachine/tuxiangdizhi"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :on-success="handleAvatarSuccess1"
            >
              <img v-if="addimageUrl" :src="addimageUrl" class="avatar" />
              <i v-else class="el-icon-camera-solid"></i>
            </el-upload>
          </div>
        </div>
        <el-form-item
          label="跳转路径"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            v-model="addForm.advertising_jump_path"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addqueding">确定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageNum"
        layout="prev, pager, next, jumper"
        :total="drugList"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    return {
      filterText: '',
      tableData: [],
      currentPage: 1,
      pageNum: 6,
      drugList: 10,
      dialogFormVisible: false,
      adddialogFormVisible: false,
      form: {},
      addForm: {
        advertising_jump_path: ''
      },
      formLabelWidth: '120px',
      // 图片上传
      imageUrl: '',
      addimageUrl: '',
      options: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '2',
          label: '禁用'
        }
      ]
    };
  },
  computed: {},
  mounted() {
    this.getAll();
  },
  methods: {
    //点击添加广告按钮
    addAdvertise() {
      this.adddialogFormVisible = true;
      this.addimageUrl = '';
      this.addForm.advertising_jump_path = '';
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.form.advertising_path = res;
    },
    handleAvatarSuccess1(res, file) {
      console.log(res, file);
      this.addimageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.addForm.advertising_path = res;
    },
    //编辑的模态框点击确定
    queding() {
      this.dialogFormVisible = false;
      http.updateAdvertise(this.form).then(r => {
        console.log(r);
        this.tableData = r.data.data;
      });
    },
    //添加的模态框点击确定
    addqueding() {
      this.adddialogFormVisible = false;
      http.addAdvertise(this.addForm).then(r => {
        console.log(r);
        this.tableData = r.data.data;
      });
    },

    //获取数据
    getAll() {
      http.getAllAdvertise().then(r => {
        console.log(r);
        this.tableData = r.data.data;
      });
    },
    modify(row, index) {
      // this.$refs.modifyinfo.open(row);
      //返回当前对象
      console.log(row, index);
      if (index == 0) {
        this.imageUrl = row.advertising_path;
        this.form = row;
        this.dialogFormVisible = true;
      } else if (index == 1) {
        http
          .delAdvertise({
            params: {
              advertising_id: row.advertising_id
            }
          })
          .then(r => {
            console.log(r);
            this.tableData = r.data.data;
          });
      }
    },
    sousuo() {
      console.log(1111);
    },
    handleCurrentChange(val) {
      this.nowPage = val;
      console.log(val);
    }
  }
};
</script>
<style scoped>
.adver-img {
  width: 100px;
  height: 60px;
}
.section1{
  margin-bottom: 40px;
}
.section1-1 {
  width: 190px;
  height: 40px;
  border: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  background-color: white;
  align-items: center;
  margin-bottom: 30px;
}
.input1 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;
  outline: none;
}
.paging {
  margin-top: 30px;
  margin-left: 30%;
}

.el-pagination >>> .el-pagination__jump {
  font-size: 17px;
}
.el-pagination >>> .el-icon {
  font-size: 17px;
}
.el-pagination >>> .number {
  font-size: 17px;
  width: 60px;
}
/* 模态框css */
.touxiangdiv {
  width: 100%;
  height: 200px;
  /* background-color: green; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
}
.touxiang {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: rgb(235, 235, 235);
  /* background: url(../../static/img/02.jpg)no-repeat 4px 5px; */
}
/* -----------图片上传----------- */
.touxiang i {
  position: absolute;
  top: -25px;
  left: -25px;
}
.touxiang >>> .el-icon-camera-solid {
  font-size: 45px;
  color: #8d8585;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  /* border: 1px dashed #d9d9d9; */
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 250px;
  height: 130px;
  display: block;
  margin-left: -50px;
}
.from-item {
  position: relative;
  left: -5%;
}
.total-box {
  background-color: white;
  padding-top: 30px;
  margin-top: 10px;
  height: 800px;
}
</style>
